<template>
  <!-- 这样设置的话 阴影的动画有点生硬, 应该是twcss 的默认动画区县问题
    class="cursor-pointer rounded-xl transition-all delay-300" -->
  <n-card
    :header-style="{ padding: '16px' }"
    :content-style="{ padding: '0 16px' }"
    :footer-style="{ padding: '16px' }"
    class="trans-03 cursor-pointer rounded-xl"
    hoverable
  >
    <!-- 头部 -->
    <template #header>
      <!-- 正如作者而言，n-space 组件是一个伟大的发明 -->
      <!-- TODO: 因为 twcss 的text-* 的默认行高问题, 需要单独的添加 leading-*, 后续需要更改 twcss 的默认配置 -->
      <n-space class="h-7 text-base leading-7" justify="space-between">
        <div class="flex items-center">
          <n-avatar
            class="mr-2 h-5 w-5 bg-transparent"
            :src="`/logo/${props.hotData.name}.png`"
            fallback-src="/ico/icon_error.png"
          ></n-avatar>
          <n-text class="text-base leading-7">{{ props.hotData.label }}</n-text>
        </div>
        <n-text v-if="hotListData" class="text-xs leading-7" :depth="2"
          >热门榜</n-text
        >
        <n-skeleton v-else width="60px" text round></n-skeleton>
      </n-space>
    </template>

    <!-- 滚动内容 -->
    <n-scrollbar class="h-72">
      <transition name="fade" mode="out-in">
        <div v-if="loadingError" class="flex flex-col items-center">
          <!-- 这个 n-result 也太有意思了, 哈哈, 有点喜欢上这个 UI 框架了 -->
          <n-result
            class="mt-8"
            size="small"
            status="500"
            title="哎呀，加载失败了"
            description="生活总会遇到不如意的事情"
          >
          </n-result>
          <n-button
            class="mt-5"
            round
            secondary
            size="small"
            @click="getHotListsData(props.hotData.name)"
          >
            <template #icon>
              <n-icon :component="Refresh"></n-icon>
            </template>
          </n-button>
        </div>
        <!-- TODO: 为什么此处需要在内部写一个 h-72, scrollbar 的 h-72 为什么没有继承过来 -->
        <div
          v-else-if="!hotListData || listLoading"
          class="flex h-72 flex-col items-center justify-between"
        >
          <n-skeleton round text height="20px" :repeat="10"></n-skeleton>
        </div>
        <!-- TODO: 此刻的 id 作用是什么? -->
        <div v-else class="pr-2">
          <div
            v-for="(item, index) in hotListData"
            :key="index"
            :id="'list'"
            :class="
              index === 0
                ? 'one'
                : index === 1
                  ? 'tow'
                  : index === 2
                    ? 'three'
                    : null
            "
            class="mb-2 flex min-h-8 cursor-pointer items-center rounded-lg transition-all delay-300 last:mb-0"
          >
            <!-- 有些不一定靠 css 实现, vue 的 绑定内联样式也方便实现 -->
            <!-- 都差点忘了, n-text 有默认的 字体颜色  -->
            <n-text
              :depth="2"
              :style="{
                backgroundColor:
                  index === 0
                    ? '#ea444d'
                    : index === 1
                      ? '#ed702d'
                      : index === 2
                        ? '#eead3f'
                        : backgroundColor,
                color:
                  index === 0
                    ? '#fff'
                    : index === 1
                      ? '#fff'
                      : index === 2
                        ? '#fff'
                        : null
              }"
              class="mr-2 flex h-6 w-6 min-w-6 items-center justify-center rounded-lg text-xs transition-all delay-300"
              >{{ index + 1 }}</n-text
            >
            <!-- 标题 -->
            <n-text class="">{{ item.title }}</n-text>
          </div>
        </div>
      </transition>
    </n-scrollbar>

    <!-- 底部 -->
    <template #footer>
      <transition name="fade" mode="out-in">
        <!-- 骨架屏 -->
        <template v-if="!hotListData">
          <div class="h-6">
            <n-skeleton text round></n-skeleton>
          </div>
        </template>
        <template v-else>
          <n-space justify="space-between">
            <n-text v-if="true" class="px-1 text-xs" :depth="3"
              >30分钟后刷新
            </n-text>
            <n-text v-else class="text-xs" :depth="3"> 获取失败 </n-text>
            <n-space>
              <n-popover>
                <template #trigger>
                  <!-- secondary 次级按钮样式原来就是灰色的, 颜色不是那么的显眼 -->
                  <n-button size="tiny" round strong secondary>
                    <template #icon>
                      <n-icon :component="More"></n-icon>
                    </template>
                  </n-button>
                </template>
                查看更多
              </n-popover>
              <n-popover>
                <template #trigger>
                  <n-button
                    secondary
                    round
                    size="tiny"
                    @click="getHotListsData(props.hotData.name)"
                  >
                    <template #icon>
                      <n-icon :component="Refresh"></n-icon>
                    </template>
                  </n-button>
                </template>
                获取最新
              </n-popover>
            </n-space>
          </n-space>
        </template>
      </transition>
    </template>
  </n-card>
</template>

<script setup lang="ts">
import { Refresh, More } from '@icon-park/vue-next'
import { useMainDataStore } from '@/store/mainData'
import { useRouter } from 'vue-router'
import { getHotLists, type itHomeResData } from '@/api/hotListAPI'
const router = useRouter()
const mainData = useMainDataStore()

// 如果想使用默认值的话, withDefaults() 这个 API 可以解决
const props = defineProps<{
  hotData: newsType
}>()

// 从接口获得的列表数据, 暂时先设置成 true
const hotListData = ref<itHomeResData[]>()

// 加载是否出现错误/是否完成
const loadingError = ref<boolean>(false)
const listLoading = ref<boolean>(false)

// 实际上是 --n-border-color
// TODO: 监听 系统变量的颜色, 切换排名的背景颜色 白:#efeff5 黑:#2d2d30
const backgroundColor = ref<string>('#efeff5')

// 获取热榜数据
// TODO: 没搞懂这个 isNew 的作用, 估计是给后台接口用的, 毕竟是当参数用的
const getHotListsData = async (name: string, isNew: boolean = false) => {
  try {
    loadingError.value = false
    const res = await getHotLists(props.hotData.name, { cache: !isNew })
    if (res.code === 200) {
      listLoading.value = false
      hotListData.value = res.data
    } else {
      loadingError.value = true
      window.$Message.error(res.title + res.message)
    }
  } catch (error) {
    loadingError.value = true
    window.$Message.error('热榜加载失败，请重试')
  }
}
// 第一次初步加载
getHotListsData(props.hotData.name)

onMounted(() => {})
</script>

<style lang="scss" scoped>
:deep(.n-scrollbar-rail) {
  right: 0; // 设置滚动条轨道的右偏移量为0。
}
</style>
